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Introduction 


The continuous and rapid development in the field of information and 
communication technology imposes requirements for sophisticated methods of the 
educational process to keep up with the successive technological developments. 

It is what led us to adopt new instructional entrances designed to achieve the 
goals, philosophy and visions contained in the document of computer and information 
technology that reflects the criteria and indicators for the subject for second year 
secondary that had been prepared in the framework of a matrix of the long relay at 
various stages of study. 

The curriculum is designed to develop self—mail and collaborative thinking skills 
and different types of students through cooperation in the implementation of projects 
to design and create interactive Web site "Illustrated dictionary terms." 

The idea of the project depends on the creation of a model program whose pages 
are designed by using (Expression Web), and the language of HTML coding, This 
project includes databases created by using MySQL program. 

We deal with databases through templates that were written in PHP programming 
language. They are open Source; you can copy and use them in the establishment of 
the site pages and understanding and the developing of any code you want to 
implement. 

The book also includes pictures of the actual application interfaces executing the 
project, to clarify all the action steps, and simplify the concepts of learners, through 


activities and exercises comprising its operation in the dedicated book. 


Finally, this book is keen to develop various thinking skills and life skills for using 
ICT through carrying out projects that give students opportunities to employ what 


they are studying in their working lives. 
(God bless) 


Staff 


3 yo Computer & Information and Communication Technology 
Second year secondary A 


Table of contents 


Topics Page 


Unit 1 : Basics of Web Site Design 


Practice (1) : Basic Concepts 
Activity(1) : Installing XAMPP 
Activity (2) : Running "XAMPP" 


Unit 2 : Requirements and production stages of the project 


Practice (1): Designing web pages outline 


Practice (2): Designing a layout for Illustrated Dictionary of computer terms" web site". 


Practice (3) : The main concepts of database 


Practice (4) : One To One Relationship 


Practice (5): One To One Relationship 


Practice (6): Deducing One To Many Relationship between two tables 


Practice (7) : Deducing Many To Many Relationship between two tables 
Activity (1) : "Creating database by using MySQL" 
Activity (2) : Inserting data in Terms table by using "MySQL" 


Unit 2 : Creating " Illustrated Dictionary of computer terms" pages 


Activity (1) : Creating web page with the name " Test1.htm" 


Activity (2) : Creating web page with name " Test2.htm" by using HTML code 


Activity (3): Linking between web pages in HTML language 


Activity (4) : Linking between web pages by using "Expression Web" 


Activity (5) : Creating project web site by using "Expression web" application 


Activity (6) : Creating Header.php page in the design screen. 


Activity (7) : Creating a PHP web page by using "Expression Web" program 


Activity (8) : Creating a page for connecting "Connection.php" 
Activity (9) : Creating "Add_term.php" 


Unit 1: Basics of Web Site Design 


nit 1: Basics of Web Site Design 


Unit 1 


Basics of Web Site Design 
By the end of the unit, it is expected that the 
student will be able to: 
1- Show some advanced scientific concepts and terms 
related to the computer. 
2- Employ computer programs in the implementation of 
learning tasks. 
3- Employ network of Internet services in the teaching 
and learning processes. 
4- Practice searches for all forms of electronic information 
on the computers and networks reliable in solving the 


problem of information. 
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Title: Basic Concepts 


We studied some important concepts and the terminology 
necessary to deal with the database through a Web page and 
handling some of its contents. 


Required: 


Choose the appropriate answer to complete the following 
statements: 


(1) Software that are free for all users: 
a. Free Ware. 
b. Open Source. 
c. Copy Write. 
(2) Programs that are published and allows users to see their 
own code and modify it are called: 
a. Free Ware. 
b. Open Source. 
c. Copy Write. 


(3) A Web page that shows only some of the information and 
shows the title moving from right to left and sound effects on 
your Internet browser program is considered: 

a. Dynamic web Page. 

b. Static web Page. 

c. Home page. 
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(4) Web page through which data can be displayed, and a 


allows the user to modify and save the modified data in the 
database, is called: 

a. Static web page. 

b. Dynamic web page. 

c. Home Page. 


(5) The User Script code used to process some of the data on 
a web page is executed in: 
a. A server device on which the site was stored only. 
b. Internet browser only. 
c. All the above. 


(6) The Script code is written in many languages, one of the 
most famous: 
a. CH. 
b. HTML. 
c. PHP. 
(7) The web page that requires you to enter your user name 
and password, means: 
a. Itis not made to handle their data. 
b. Static web page. 
c. Deal with the database. 
(8) The term Server refers to the computer: 
a. With the highest technical specifications from the rest of the 
network devices. 
b. Larger network. 
c. connected to the Internet 
(9) The term Server can refer to: 
a. A computer device at least in the technical specifications. 
b. The role of the computer in the computer network. 
c. Computer with the Director General. 
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(10) PC in which we store a Web site, is called: 
a. Database Server 
b. Mail Server. 
c. Web Server. 
(11) PC that stores the e-mail of a company is called: 
a. Database Server 
b. Mail Server. 
c. Web Server. 
(12) HTML markup language is used to create: 
a. Dynamic Web Page . 
b. Static Web Page. 
c. PHP Page. 
(13) Web pages with PHP extension refer to the execution of 
the PHP code: 
a. Internet browser. 
b. Client machine. 
c. Server device. 
(14) The term Publishing web Site means: 
a. Website published on the Internet. 
b. Publish a site on a computer in the pages LAN computer network. 
c. publish a website or pages on a computer in a network 
(15) One of the companies created their own site to manage 
its business and published it for all employees only, this site 
will be considered: 
a. Local Host. 
b. Hosting Web Site . 


c. Host. 
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(16) The following address is for a private company: 
http://www.company.com/index.html, from the reading the 
title we notice that this site has been published: 

a. Local Host . 

b. Publishing web Site. 

c. Locally and on the Internet. 
(17) There are many free programs related to database 
management systems that has relationships: 

a. MySQL. 

b. SQL. 

c. Access. 
(18) The language used in dealing with data from add, delete 
and edit are: 

a. SQL. 

b. HTML. 

c. Java script. 
(19) One of the modalities for the transfer of data from a Web 
page to another, and allows the developer of the site for the 
user to visit the site of some or all of the pages, is called: 

a. Password. 

b. User Name. 


c. Session. 


10 | r Computer & Information and Communication Technology 


Second year secondary 


d 


nit 1: Basics of Web Site Design 


Activity (1) 


program and install it . 


Under the supervision of your teacher, follow the following 

steps to install the software: 

e Use the program keywords related to installing the program to 
search through the Internet search engines. 


e Discuss what you reached with your classmates and your teacher. 
e Press D-Click on xampp-win32-5.6.3-0-VC11-installer.exe file. 


After seeing the following screen: 


BitNami 


e follow the installation wizard through the following screens: 
After displaying "welcome screen", press the "Next" button 


2 


O bitnami 
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e The 


° Study the 


screen in front 

"program components" that 
you want to select, discuss 
with your teacher and 
classmates these components 
and their uses, then select the 
components you choose. 


Advice ........ 
Choose them all specially 


Apache and MySQL. 


e Press "next". 


e From the screen of 
identifying the folder, select 
the folder in which the 
software is installed, then 
press the "Next" button. 


screen that 
appeared in front of you and 
discuss the content with your 
colleagues and your teacher, 
and what it indicates? 
It confirms that the Free 
Software supports some of 
the open-source software 
with the ability to learn more 
about XAMPP program. 


° Press " next" 


Second year secondary 


of you 


Select Components 


determine 


Apache 
MySQL 


Tomcat 


phpMyAdmin 
webalizer 
Fake Sendmail 


IIA F AA F AAA S E 


FileZilla FTP Server 
Mercury Mail Server 


XAMPP Installer 


Installation folder 


Please, choose 4 fa 


Cancel 


Select a fold& | C:\xamppl 


Bitnami for XAMPP 


XAMPP Installer 


Computer & Information and Communication Technology 


Bitnami for XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
Qurce apps on top of your existing XAMPP installation. 


Cancel 
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e When the screen of installing XAMPP program process 


appears, Wait until the end of the installation, and then press "Next" 


Welcome to XAMPP! [) 


XAMPP is an easy to install Apache distribution 
containing MySQL, PHP and Perl. 


button. 


BitNami for XAMPP 


BitNami for XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
source apps on top of your existing XAMPP installation. 


Texno 


e When you see the last screen of 
installing the program, 
select to access control panel 
of the XAMPP program 


e Click "Finish" button. 


e When the control panel of XAMPP 
program appears, make sure to 
choose the Apache, then press the 
"Start" button below the "Actions 


Instaling 


Lg conta 


Module ID(s) Portis) Actions @ Netstat 


m (62 80,443 | Stop Config LE 
680 3006 | Stop || ag Config Gamat 
Sta Admin Config © Services 

Stat | Admin | Config © Help 

Start Admin | Config E Quit 


XAMPP Installation Directory: “c:\xampp\" 
Checking for prerequisites 
in] All prerequisites found 
| [main] Initializing Modules 
| [Apache] XAMPP Apache Service is already running on port 80 
| [Apache] XAMPP Apache Service is already running on port 443 
| [mysql] XAMPP MySQL Service is already running on port 3306 
l [main] Starting Check-Timer 
OPM [main] Control Panel Ready 


e Repeat the previous step with MySQL. 
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How to make sure you installed 


(9) 


XAMPP program correctly? 


Discuss this with your classmates. 


e Load Internet browser software available on your computer. 
e Type in the address bar "Localhost", and press the "Enter" key. 


e Then you will see the next screen: 


O- IE http://localhost/xampp/ 
& XAM P P io r Wi nd OWS rie cl Deutsch / Francais / Nederlands / Polski » Italiano / 


lorwegian / Español » +3 / Portugués (Brasil) / 38 


Try out the new XAMPP welcome page A 


We are working on a new Welcome page for XAMPP and we need your help! You can you can see the current 
version at Dashboard. We are improving our current "FAQs" and adding new "How to" guides. We posted some 
suggestions for new guides at ApacheFriends forum. If you have any comments or suggestions for the new welcome 


page, please don't hesitate to post in the forum. Your feedback will help us improve XAMPP!. If you have any 
comments or suggestions for the new welcome page, please don't hesitate to post in the forum. Your feedback will 
Documentation help us improve XAMPP! 

Components 

Applications 


Php Welcome to XAMPP for Windows! 


phpinfo() Congratulations: 
CD Collection You have successfully installed XAMPP on this system! 
Biorhythm 
Instant Art Now you can start using Apache and Co. You should first try @Status@ on the left navigation to make sure 
Phone Book everything works fine. 


Perl For OpenSSL support please use the test certificate with https://127.0.0.1 or https://locathost 


— perlinfo() Good luck, Kay Vogelgesang + Kai ‘Oswald' Seidler 
Guest Book 


ee Install applications on XAMPP using Bitnami 
Info Apache Friends and Bitnami are cooperating to make dozens of open source applications available on XAMPP, for 
Tomcat examples free. Bitnami-packaged applications include Wordpress, Drupal, Joomla! and dozens of others and can be deployed 
with one-click installers. Visit the Bitnami XAMPP page for details on the currently available apps. 
Tools 


phpMyAdmin 

FileZilla FTP W) 
Webalizer 
Mail 


XAMPP Hosting 
2002 


FRIENDS... XAMPP provides an ideal local development environment, but is not meant for production deployments. We want to 
make hosting PHP applications created with XAMPP as easy as possible. Visit our Hosting page for reading our v 
documentation. 


After installing XAMPP program, your computer becomes a Server 


"local host" 
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This activity helps you to run XAMPP software that makes ` 
your computer act as a Server, and operate the Apache 


program and MySQL database management systems. 


Required: 
Run control panel of the XAMPP program and make sure you run 
programs Apache and MySQL. 


Executing the activity: 
Run the control panel of the XAMPP program by one of the 


following ways: 


Ji winrar 


> ZAME 1. Start menu as follows. 


GJ Bitnami for XAMPP 
° Choose XAMPP Control Panel 


=; Uninstall XAMPP 
GJ XAmpPP Control Panel 
Jo XAMPP htdocs folder 
P xvid 
do Yahoo! Messenger 
do YTD Video Downloader ~ 


4 Back 


e Through control panel of the program 
XAMPP ,do what is indicated: 


[J XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 } lo G So 


XAMPP Control Panel v3.2.1 Config 
Modules PLES 
Service Module PID(s) Ports) Actions SNetstas 
Apache 1812 80.443 { Stop | [ Admin | [Config | [ togs- GH Sheil 
MySQL m3 3306 [Stop] Explorer | | 
FileZilla | Start anfic || © Senices 
Mercury | Start Help 
= Sn Conta] | Click Start to run 
[main] XAMPP Installation Directory: “c:\xampp\" 
[main] Checking for prerequisites 
[main] All prerequisites found Apa che as well as 


[main] Initializing Modules 
fApache] XAMPP Apache Service is already running on port 30 
[Apache] XAMPP Apache Service is already running on port 443 


the Start button 


[mysq!] XAMPP MySQL Serice ts already running on port 3306 
[main] Starting Check-Timer 
[main] Control Panel Ready next to the MySQL 


appears on the 
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2. Also you can run XAMPP from XAMPP-control.exe file in the 
folder "C: \ XAMPP", taking into account to be sure you install 
the software on your machine. 


Change the Apache port 


Sometimes the problem occurs when you click Start in 


front of Apache to run it and the window appears as 


follows: 
(5 XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] Si) 
XAMPP Control Panel v3.2.1 (CZ conta] 
ae Module PID(s) Port(s) Actions Adenia., 
Apache (Stat) | Admir "Config | Logs | E Shell 

MySQL Start Admit Config Logs 1 Explorer 

FileZilla Start Admir Config Logs | © Services 
Mercury nag oo | O Gna) | (eammaanael 
Tomcat [Stat] | Ad Config Logs Quit 
59:31 [main] about running this application with administrator rights! 4 


59:31 += [main] XAMPP Installation Directory: "c:\xampp\" 
= [main] Checking for prerequisites 
= [main] All prerequisites found 


p [main] Initializing Modules 
31 [Apache] Port 80 in use by "Unable to open process" with PID 4! 
= [Ap z AD e VV v, WIthOu e CO ured po He = 


2:59:31 = [Apache] You need to uninstall/disable/reconfigure the blocking application 

2:59:31 =- [Apache] or reconfigure Apache and the Control Panel to listen on a different port 

2-59:31 = [main] Starting Check-Timer 

2:59:31 = [main] Control Panel Ready ES 


The line referred to illustrates the problem that the port 80 is 
busy by another application and this happens if you install 


more than one server on the operating system. 


This problem can be resolved by choosing another port for 


apache program by doing the following: 
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the path: 
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As in the following: 


T -- 
ee | 
GO- J CAxampp\apache\conf -| ++ || Search conf P 
File Edit View Tools Help 
Organize v [af Open X Burn New folder =» © 
S Name Date modified Type 
= 
a 0p Computer d etre T-10/°8/)) yo File foider 
4 È, Abdallah Mansour (C:) ae ; 
Ji save & original + 10/+E/)) yo File folde: 
sslert T+10/+L/)) ye -EOY File folder 
Ge 75390073 a585fdete4d82219f882 -~ i y.i F 
SshLcsr hee = ate Fil jer 
d AdwCleaner x 
d sshkey T+10/+£/)) yo jer 
A d9978369e590607f1b64 EAI à ONV F 
D Downloads | charset.conv VELV/\V phe NV File 
nloa 
ee =) httpd.conf T+}0/+¥/+A ye )T:01 CONF File 
di MSOCache < x = 
Ü Perflogs magic *DEPAV/1V a -1:9-4 File 
p Program Files | mime.types Tek tay TYPES File 
_. openssi.cnf PILA) a eYit NF File 


di ProgramData 
d SWsetup 
J swroots 
d Users 
bi Windows 
di xampp 
c> Local Disk (D:) 
a Removable Disk (G:) 


m 


> Ca Network 


Date created: T-16/+£/1) ye -ESY 


httpd.conf Date modified: T-!0/+V/+A ye 17:07 
lat) conr Fite Size: 208 KB 


e You can also open httpd.conf file by clicking 
XAMPP Control Panel window as follows: 


| [E] XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013] 


| XAMPP Control Panel v3.2.1 


config button on a 


CEES) 
# Config 


Modules Netstat 
Service Module PID{s) Port(s) Actions (B netstat | 
— = — - zea 
Apache Stat || Admin | (Canha l kons l |i Sheil ] 
Apache (httpd.conf) 
= Start Le Apache (httpd-ssi.conf) 
FileZilla Start ] f Cc Apache (httpd-xampp.conf) 
—— aa PHP (php.ini) 
Mercury Start C 
| Stadt = phpMyAdmin (config.inc.php) 
Tomcat Start Admir lg 


<Browse> [Apache] 


2 12- [main] about running this application with administrator rights! <Browse> [PHP] 
2 >a [main] XAMPP Installation Directory: “c:\xampp\" <Browse> [phpMyAdmin] 
| za [main] Checking for prerequisites 
12 [main] All prerequisites found 
1 [main] Initializing Modules 
1 se [Apache] Problem detected! 
1 42 [Apache] Port 80 in use by “Unable to open process” with PID 4! 
1 v2 [Apache] Apache WILL NOT start without the configured ports free! z| 
1 se [Apache] You need to uninstall/disable/reconfigure the blocking application | 
31 2 [Apache] or reconfigure Apache and the Control Panel to listen on a different port 
31 va [main] Starting Check-Timer 
1 4 [main] Control Panel Ready < 
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pae 


After opening the file httpd.conf, notepad window appears as 


follows: 


Notice that the line referred to in the following figure determines 
the port number, a port 80. 


TÌ] httpd.conf - Notepad l-le j 


File Edit Format View Help 


a 


Listen: Allows you to bind Apache to specific IP addre 
ports, instead of the default. See also the <VirtualHc 
directive. 


Change this to Listen_on specific IP addresses as show 
prevent Apache from glomming onto all bound IP address 


OSE Fe SE SR SE SR SR i 


Dynamic Shared Object (DSO) Support 


# 

# To be able to use the functionality of a module which 
# have to place corresponding LoadModule' lines at this 
# directives contained in it are actually available _bef 
# Statically compiled modules (those listed by httpd -1 
# to be loaded here. 

# 


< m r 


e Change the number to 81, and save the file After the restart of 
Apache. 
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What do you notice? 


Discuss this with your classmates and your teacher. 


e Ensure that we run Apache in the new Port 81 as follows: 


12:59:31 <= [Apache] 
12:59:31 = [Apache] 
12:59:31 = [main] 

12:59:31 = [main] 

01:10:02 = [Apache] 
01-10.02 <= [Apache] 
01:10:02 = [Apache] 
01-10:02 = [Apache] 
01:10:02 = [Apache] 
01:10:02 = [Apache] 
(01:10:02 = [Apache] 


or reconfigure Apache and the Control Panel to listen on a different port 
Starting Check-Timer 

Control Panel Ready 

Problem detected! 

Port 80 in use by “Unable to open process” with PID 4! 
Apache WILL NOT start without the configured ports free! 
You need to uninstall/disable/reconfigure the blocking appys 
or reconfigure Apache and the Control Panel to listen 
Attempting to start Apache app... 
Status change detected: running 


If you run 
Apache 


Í XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] — | 5 
XAMPP Control Panel v3.2.1 £ Contig 
Modules z 
Service Module PID(s) Port(s) Actions [ Ø netstat | Netotat 
2532 : - = 
Apache 1259 1, 443 Admin Config Logs E Shell 
Start Admin | f Config [ Logs |_| Explorer 
Admin Config Logs © Services 
Admin Config Logs © Help 
Start Admin Config Logs E Quit 
You need to uninstall/disable/reconfigure the blocking application Z] 
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You must specify the new port 81 program through the 
Internet browser XAMPP. 


http://localhost:81/XAMPP/ 


As follows: 


(S| © j 
i Ls £93 


_ 2 ~ ©] GE) xawpr sss <] 


inglish / Deutsch ; Francais / Nederlands / Polski / Italiano / 
prwegian / Español / = 


1 
ol/ =X, Portugués (Brasil) / 5+5 


APACHE 
FRIENDS 
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Unit 2 


Requirements and production stages 
of the project 


By the end of the unit, it is expected that students will 


be able to: 

1- Suggest simple projects to employ the applications and 
information and communication technology services in the 
fields of study and life. 

2- Employ information and communication technology 
applications in exchange projects’ tasks. 

3- Employ some of desktop programs and applications 
(Worksheets — Data Bases..) in producing specific tasks 
within educational projects. 

4- Employ several programs to solve educational and life 


problems. 
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5- Design suitable database for his project. 

6- Practice PHP programming skills. 

7- Use some of Internet applications in the implementation of 
his project. 

8- Design interactive Web pages for his project. 

9- Link the interactive Web pages with databases. 

10- Produce a project using advanced Internet applications. 

11- Employ advanced databases (MySQL) in designing web 
sites to solve life problem. 

12- Use PHP programming language in producing software 
and web site to express his/her thoughts. 

13- Evaluate web sites and information resources in terms of 


accuracy and credibility in the light of specific criteria. 
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Under the supervision of your teacher, cooperate with your 
group to employ what you learned from the graphics and image 
_ processing software in making plans to site pages . 


Proposal, such as 


e Asite for tourism in Egypt 
e A site for the history of Egypt 


e A site for the safe use of the Internet. 


Display the scheme to colleagues using programs presentations 
and multimedia: 


e Determine pages of the site and the purpose of each page. 


e Determines the pages that appear with all pages of the site. 


Discuss 


23 Computer & Information and Communication Technology 
Second year secondary A 


Unit 2: Requirements and production stages of the project = Te 


The proposed scheme with your teacher and with the rest of the 
groups. 
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= Practice (2) 


Title: "Design scheme site for "Illustrated terms Dictionary site 


| Under the supervision of your teacher and your cooperation i 
i with your group, employ what you learned from the graphics and i 
| image processing software in making plans to project pages. | 


Display the scheme to colleagues by using programs presentations 


and multimedia: 


e Determine pages of the site and the purpose of each page. 
e Determine the pages that appear with all pages of the site. 


| Discuss the proposed scheme with your 
teacher. 
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è 3 Practice (3) | 
ae 


Title: "The basic concepts of databases" 


i Consider the following table of student data: Py 


[Student name [Gender] Governorate | Birth aate | Tel No 
[monamea | wale | caio | 1/1/2000 | 2468 
[sama [romae] ciza | 3/1099 | 87887 
[rama  |romae| caro | 3/42002 | 32323 
rouse [mae | ciza _[unisraoor | 54545 
[hea [Fonte] Shai | 617/1908 | 65656 


Discuss the following with your classmates and your teacher: 
-Records and fields: 


Fields Records 


-The characteristics of each field, in terms of : 


Field Size Field Type Field Name 
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Notice: Can student's name, the name of the governorate, date of birth 


... etc be repeated? 


Student name Type of student governorate Date of birth telephone 
repeated Not repeated Not repeated Not repeated Not repeated Not 
repeated repeated repeated repeated repeated 
= Which fields in the table fits to be a primary key field......... ? 


= Say why you choose this. 


a 


- How can you add a new field that serves as the table's primary key? 


a 


Type your suggestions 
Discuss them with 
your teacher and classmate. 
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Practice (4) 


Title: "One To One relationship between two tables" 


primary key field 


primary key field 


Table 'student status' Table 'student' 


Status | School | Grade No Phone | Address | Nationality Name No 
Date of Birth 
year 
passed | 2016 2/1 3 11212 Cairo | Egyptian | 1-1-200 Hani 1 
passed | 2016 | 2/3 4 54633 Giza | Egyptian | 2-2-2001 | Amal 2 
passed | 2016 | 2/5 1 99877 Qena | Egyptian | 3-3-2002 | Walid 3 
failed | 2016 2/6 2 55889 | Aswan | Egyptian | 4-4-2003 | Samar 4 


QD 
Study the scheme, and then follow the following procedures: 


— Describe the relationship between the two tables. 


— Select the linking fields to both tables. ............... 
— The two linking fields are identical in terms of ......... ET 
- The relationship between the two tables-one to one relationship with 
examples of records of both tables: 


Discuss your explanation with your teacher and classmates: 
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, Practice (5) 


Title: "The relationship of One To One between two tables" 


A foreign field FK Non-replicable 
PK primary key field 


PK primary key field 


class table (Teacher agenda) 


Class leader | Class | Class code Phone | Address Name Teacher 


code code 


Study the scheme and follow the following procedures: 
e Describe the relationship between the two tables 


Discuss the following with your teacher and classmates: 
e There is a field of the first table is linked to the first field of the second 


one, Identify them ......................65 Gein iismemeetdecenes 
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Title: "Concluding one to-many relationship between two tables." 


A foreign field FK 


Grade table 


PK primary key field 


student table 


Grade place | Grade Name | Grade No 
1* floor one 101 
2" floor two 201 
3" floor three 301 


Grade No | Branch | School year | Pupil No 
101 scientific 2016 3 
301 scientific 2016 4 
101 | literary 2016 1 
201 | scientif 2016 2 

ic 
201 | literary 2016 5 
301 scientific 2016 7 
301| “rr 2016 9 
101 | literary 2016 10 
101 | literary 2016 12 


Study the scheme, and then follow the instructions: 


e Describe the relationship between two tables: 


PK primary key field 
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Discuss the following with your teacher and classmates: 
e Select the name of the table "one" ............... , the name of the 


table "Many'................... 


e There is a field of the first table that is linked to a field of the second 


one, identify the two fields: 


e Select the number of students in grades 1-2. 
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Practice (7) 


Title: "Concluding many to many relationship between two tables" 


PK 
primary 


Teacher table Grade table 


Grade Grade 


Teacher 


Specialization ae Teacher No kev field Grade No 
place name 

computer | Ahmad 3 1* floor one 101 

English | Mona 4 2" floor two 201 

Arabic | Amal 1 3" floor three 301 
maths | Omar 2 
art | Hanaa 5 
Pysical Shereen 6 

educational 
Linking table/ 
Grade No and teacher No 
rows 
Teacher No Grade No 


Together as the primary 
key in the linking table 


Study the diagram, and then follow the following procedures 
e Describe the relationship between the two tables. 


Discuss the following with your teacher and classmates: 
e Fill the linking table with a model of some records. 
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characteristics: 


its content: 


data table with the name terms contains (5) 


! the database name: dbdictionary 
i five fields are (ID — Term — Terms — Defe — Picture) 


“dbdictionary" database: 


(1) Run XAMPP program and then run your program Apache and MySQL 


guided by the be Se screen: 


This activity helps you create a database with the following 


Under the supervision of teacher do the following steps to create 


XAMPP Control Panel v3.2.1 


Module 
Apache 
MySQL 


FileZilla 


PID{s) Por{s) Actions 
1720 
3768 80, 443 


2260 3306 


L_ Stan 


| Stop 
| Stop 


Stan 


[Stan 


Enabling autostart for module “MySQL” 


Stasting Check-Timer 
Control Panel Ready 


e) Autostart active: starting 
e Attempting to start — app 


Autostart active: startin 
Attempting to start aysa app. 


e] Status change detected ow 


[mysql] 


(2) Type the following address: http://localhost/phpmyadmin/ available 


on your Internet browser's address bar. 


3) Databases L) SQL Ñ Status 
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H Sener 127001 


Status change detected: running 


RL-O;index (pnp?db=8 


a Users ig Export s} Import y? 


9c9b1d1595ed6443c6506a76 D 9 


$ Replication >) Variables Y More 


? i 


Jnit 2: Requirements and production stages of the project 


(3) Select "Databases" tab at the top of the previous screen, and then 


select the language of the application interface that you prefer in the 
"Appearance Setting" part, then click the "NEW" referred to the top 


left of the screen to have the following screen: 


MM (Sener 127.001 


phpMyAdmin 

ARONG Databa ii L SQL Œ Status a 

Recent Favorites 
ġ New 


hg ia Databases 


Pj cdcol 


xport__ 5} Import a? Settings | Replication <, Variables Y More 


2- Type new 
database 


create to -" 


establish a new 
Click database 


L 9 information_schema ù Create database © 


| 
pms [tase ane 


| performance_schema 


Collation 


Lj phpmyadmin 


term 


Pa test 


p webauth 
1-Previously 
established 

database 


i a» Check Privileges 


Che 


ck Privileges 


bin a: Check Privileges 


The previous databases names created appear. 


After typing the database name to be created, for phpMyAdmin 


example "dbdictionary" and by clicking the & fil a oae 
Recent Favorites 
"Create" button, the new database is created. E = ses 


mn dbdictionary 
Notice: + _.. information_schema 


The database that has been created within the 


previous databases appears as follows. 
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(4) On clicking '"dbdictionary", the following screen appears. 
(describe the components discussed with your colleagues and your 


teacher). 
phpMyAdmin W Structure |- SQL 4 Search Query {++ Export =} Import Operations Y More 
z EE] 
Salis Go) No tables found in database 
Recent Favorites 7 
ype table GA) 

mè New #JCreate tabl 2- ROW NUMBER 
a cdcol 
2 dbdictionary Name |f Number of columns: |4 
P- employees 
Pg infomati Database 
jia mysql name 3-clich the button to create the table Go 


Make sure you choose "Structure" tab, under the "Create table" 
type a table name, for example "Terms", then enter the number of table 
fields in the "Number of Columns" Let (5), and finally click on the "Go" 


button to show the following window: 


Field 
data type 


Field 
length 


* Privileges Operations V More 
Table name 
Structure i 

Name Length/Values i Collation Attributes Null Index 

id INT 11 None vj v w a PRIM. 

term VARCHAR v] 500 None v utf8_croatian_ci |v} MIE a 

trans VARCHAR v] 500 None v utf8_croatian_ci |v | iv] 

defe VARCHAR Iv] | 500 None v]!  utf8_croatian_ci [v] ix] 

picture VARCHAR ~] 300f 
Table comments: Storage to be able to type in Arabic inside 

innoDé the field, select run system 

PARTITION definition: i 


To save 
the table 
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From the previous screen. 


Notice: 

— The spreadsheet consists of Fields. 
Each field must have a name, which must be entered under the 'Name', and 
data type which must be determined under the "Type', and the size or length 
which is the required value to be entered under the 'Length Values'. To type 
in Arabic inside the field, you should select the type of encryption down 


"Collation". 
-In ID field we select "Primary" from drop-down menu below the Index 


to make it a primary key. 


-Click the "Save" button to save the spreadsheet under the name of "Terms." 


(5) After clicking the "Save" button, the following screen appears: 


. Search ë inset 44 Export 4} Import =) Privileges Operations V More 


Rows | Type Collation Size Overhead 
C terms wi Browse jf Structure œ Search J Insert $ Empty @ Drop InnoDB latini_swedish_ci 16 KiB 
1 table Sum 0 InnoDB lIatini_swedish_ci 16 KiB 0B 


With selected 


2-number of 
number o Type the name of the 


Name: Number of columns: |4 The table is established 


In this screen we find the table that has been saved with the name 
"Terms", and the number of tables in the current database. 


In the same way and under the supervision your teacher, create 
other tables in the database, depending on your needs. 
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(6) Review Structure data 'dbdictionary' database table as follows: 


Choose the data table named "Terms', and then click the 


"Structure" button, as shown in the following screen: 


The names and characteristics of 


the fields in a table "Terms" err) 
sāitarget O ~ © || 12 localhost8080 / 127.001 / 
/ a Sener 127.0.0.1 » Database: dbcactonary » B Tabie terms A A 
Name of Browse » Structure |J SQL \ Search 3 insert =+ Export =» import Y More 
database # Name Type Collation Attributes Null Default Extra Action 
iid int(11) No None AUTO_INCREMENT gy? Change @ Drop w More 
È 2 tem  varchar(500) utf8_croatian_ci No None & Change @ Drop w More 
dbdictionary à z 
3 trans varchar(500) utf8_croatian_ci No None J Change @ Drop v More 
|} New = >: 
$ P terms 4 defe varchar(5000) utt8_croatian_ci No None a Change @ Drop w More 
5 picture varchar(300) utf8_croatian_ci No None p Change @ Drop w More 
-a employees t Lj) Check All With selected: © Drop P Primary u Unique E] index 


information_schema 


4 mysql & Print view Z Relation view gu Propose ® Track table > Move columns 
| 
7 aga eee ln }<cAdd 1 columnis) © At End of Table At Beginning of Table After id v 
+ phpmyadmin rei tiii To create a 
Pg test <a. new field 
+ webauth Information 
Space usage Row statistics 

Data 16 KiB Format 

Index 0 B Collation latini_swedish_ci 

Total 16 KiB Next autoindex 

Creation May 12, 2015 at 12:10 AM 
C] 


Study the previous screen. What do you notice? Discuss 


(<) | £8. http://localhost:8080/phpmy 


After studying the previous screen, we 
eee phpMyAdmin 
notice the following: adie 


Recent Favorites 


e The name of the database "data |) m =“ 
i’ cdcol 


See, dbdictionary 
dictionary". J New 


+_y terms 


| 
+ ij users 


with your teacher and classmates , 


e Data table named "Terms". 
+_ =: employees 


+. information_schema 
+—. mysql 
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e Data table 'Terms" contains (5) five fields, showing their names, types 


and sizes. 


e The 'ID' field as a primary key field is set. 


| | _| Browse “ Structure is SQL à Search #< insert l Export =; Import ` 
| | # Name Type Collation Attributes Null Default Extra Action 

| e 1 id int(11) No None AUTO_INCREMENT s” Change 
| || 2 term varchar(500) utfS_croatian_ci No None a” Change 
| C] 3 trans varchar(500) utf&_croatian_ci No None oo Change 
| | L] 4 defe varchar(5000) utfS_croatian_ci No None a” Change 
| [] 5 picture varchar(300) utf8_croatian_ci No None & Change 
| | TE. Check All With%elected: [©] Browse p Change © Drop dP Primary u Unique 


é Print view 


gh Propose table structure @ ® Track table ib Move columns 


&@ Relation vie 


| %cAdd |1 column(s) @AtEnd of Table © At Beginning of Table O After) id iv Go | 

| | + Indexes | 
| 

| H 

| Information | 

| [Ám 

| Space usage Row statistics 

| Data 16 KiB Format Compact 

| Index a B Collation latinl swedish ci 

| A x 

| Total 16 KIB Next autoindex 10 


Creation May 12, 2015 at 12:ł10 AM 


e You may select the field and control the characteristics of the 
group through the buttons down the last field. 
e You can also add a new field to locate and add it in the active 


| table. 


38 A Computer & Information and Communication Technology 
Second year secondary A 


Title: "Insert data into a table using MySQL Terms" 


re er rere 


By following these steps: 


e Select spreadsheet data entry "Terms", then Click "Insert" tab, and 


= fT Server: 127.0.0.1 » @ Database: dbdictionary » MB Table: terms 


| Browse ¥ Structure |] SQL à Search ë Insert 


Column Type Function 


id int(11) vl 


«+ Export = Import 
Null Value 


varchar(500) 


= Privileges 


enter data in each field down the i a 


° Operations v More 


trans  varchar(500) vi 


defe 


varchar(5000) 


varchar(300) 


picture 


| Ignore 


Column Type Function Null Value 


id int(11) 


term varchar(500) vl 


trans varchar(500) vil 


defe varchar(5000) 


picture varchar(300) 


Insert as new row (v| and then Go back to previougfia 
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Select the Insert tab 


. data entry below Value 


for each field. 
Click "Go" after inserting 
data. 


Unit 2: Requirements and production stages of the project a 
eee SSS A A ad 


The same way, you can enter data in any table of the database tables 


using the application of MySQL. 
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Unit 3 


Creating Site Pages 


"Illustrated Dictionary of computer terms”. 


By the end of the unit students are expected to: 


p 


(1) 


(2) 


(3) 


(4) 


(5) 
(6) 


(7) 


(8) 
(9) 


Employ some of the e-learning tools in the production of his 
project. 

Employ information and communication technology 
applications in the construction of educational content. 

Employ one of applications of creating website in linking Web 
site pages. 

Employ appropriate applications in the treatment of 
multimedia elements (voice - video-image.... ) 

Practice as HTML and PHP and its applications in web design. 
Precise dealing with electronic information skills (identify - 
Evaluation - criticism — organization) 

Employ electronic information sources associated with a 
specific project in the implementation of the project. 

Learn some of the transactions related to the language of PHP. 
Learn some of the concepts and formulas related to the IF and 


Switch statement. 
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Required: "Create a Web page (test1.html) using HTML code' 


ce os aa Ss ea a ea a cn E lee ay E E aes on ae E a pee a ae eee ecg ee E E E 


Through this activity, you can use HTML code to create the Web as the 


"Test1" page and its characteristics: 


e Internet browser page title "My First Web Page". 

e The phrase "skäl 5 sS" appears in the first line of the Internet 
browser screen. 

e In the second line: Egyptian flag image is in the middle of the 
screen. 

e Inthe third line, the words: "+. bai" are large scale in the middle 
of the screen as well. 

e Inthe fourth line the words: "sül aiall" are on the right of the 
browser screen. 

To do so, follow these steps under the supervision of your teacher 


Implementation Steps: 
(1) Load the text editor Notepad program. 


(2) Type the following code: 


. My First web Page 
</Title> 
> 


<img src = "“Egypt.jpg"> 
<H1I> „a ka </hi> 


</p> 
kp align = "“right"> äl äs </p> 
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(3) Save the file with the name and extension "Test 1. Html" on desktop and 


select "UTF-8" from "Encoding" to display Arabic texts correctly on the 
browser. 


As follows: 


(©) ~ T E Desktop vė Search Desktop p 


Organize v New folder 


A 
Fr Favorites x Ubmies 
E Desktop | System Folder 


Ei Downloads 


=| Recent places User 
System Folde 


( Libraries 
@& Apps 
+| Documents 


a Music 


See System Folder 


Select the 


Apps 
Shortcut 
puter 1.76 KB 


encoding bdallah_mansour (C:) 


v ‘Vill 13-28-2015 Translation tst Sec v 


Cancel 


a Hide Folders 


(4) Open the file 'Test].html' from the desktop to know the result of the 
execution of the code in the Internet browser screen and the following 


appears: 


Ble ùk Yew Fovertes Joos Heb 


x) 2) A po som Ve tacts E 


©) COocumerts and SeeurgslahmedDedteglo Mian ATeno 


Lu m 
get D S 
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(5) You can review the HTML code to make any modifications, by 


pressing Right Click button on the internet browser screen and selecting 


the command "View Source" from the shortcut menu, as follows: 


d (2 jah yrs E 


E) C Eoamerts ré Serge heed betio Ti eta 


(6) After saving the changes in the HTML code, reactivate the internet 
browser screen, then press the F5 key to see the result of modifications 


to the web page. 
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Required: Create a web page with the name 'Test2' which displays the 


\ 
| 
| 
| 
| 
| 


_ following: 

e Internet browser page title is "My Second web Page". 

e The phrase "ciel all cla ol ja leao" is in the first line of the 
Internet browser screen. 

e In the second line: place the "Egyptian flag image" next to the 


phrase "A| 4aauall" in the right of the browser screen following 
dimensions "50 x 100". 


Implementation Steps: 
Dear student, with the help of the skills you gained in the previous 
activity, create a second Web page by following these steps: 
(1) Open the text editor that you will use to type HTML code which is 


(2) 


My Second web Page 
</Title> 
</Head> 


<Body> 
onol alll elè ol as lakso] 
<p align = “Right” > 
<img src = "“Egypt.jpg”" 
height=50 width=100> 
wel äi </p> 
</Body> 


</HTML> 
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(3) Type the code. 


(4) Save the file with a name and the extension "Test2.html" on the 


desktop. 


(5) Select "UTF-8" from "Encoding" below the "Save As" window. 


(6) Open the file on the desktop and evaluate the result of the 


implementation of the code in the Internet browser screen: 


") My Second Web Page - Mozilla Firefox 
File Edit Wew History Bookmarks Tools Help 
| |_| My Second Web Page [+ 


é } |_| file:{{!C:Documents and Settings/ahmed/Desktop/ 2/sa.0x wasfTest2,ht 7 > C 
gy. | 


oal il glia ol yuna Issa 
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reating Site Pages 


Practice: Complete the following table: 


Then type the purpose of the code which was typed: 


Code 


Purpose 


<Title> 
My Second Web Page 


</Title> 


<Body> 


i abil eli Cy) paa | glial 


<p align = "center"> 


Code explanation: 


- The beginning of the tag <P>: 
a new paragraph, 


- align = "Center" feature means 
the alignment of the following text on 
the screen browser is Center. 


<img src = 
"Egypt.jpg" 
height = "50" 
width = "100"> 


— Explain the code? 


- Complete: What is the format of the 
image alignment? 


E 


Computer & Information and Communication Technology 
Second year secondary 


d 


= 


Required: Modify what is necessary in web the two pages 'Test1.html" and | 
"Test2.html' by modifying HTML code. 
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e On clicking the text " the second page" ,you move to web page 


"Test2.html" from The "test1.html" 


e The possibility of a return to "Test1.html" if you click the Egyptian 
flag image below the browser screen for the "Test2.html". Page 


e Activity steps: 


(1) Modify the code in the 'Test1.html' as follows: 


z My First web Page 
</Title> 


“center"> 


"Egypt.jpg"> 
/H1> 


“right"> 
= "test2.html"> dail deol </a> 


Notice what will happen. 
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The text, to be made as a hyperlink, was put between the beginning and 


the end of the following code: 


<a href = 'test2.html' > next page </a> 


<Title> 
My second web Page 
</Title> 
</Head> 


<Body> 
coaiol all cla ul as Iglss] 
<p oa = "Right"> 
<a href = “Testi1.html"> 


<img src = We} 4 eet le 
Hetight=50 width=100> </a> 
weil isiol </p> 


</Body> 
</HTML> 


What do you notice? 
-The image code, intended to be made a hyperlink, was inserted 


between the beginning and end of the 'Tag' as follows: 
<a href = 'Test1 .htm'> 
<img src = "Egypt.jpg" Height=50 Width=100> 


< a> 
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@ My Second Web Page - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 
CE -~ & |æ] E A p- Search Je Favorites g Na! 


Address €) C:\Documents and Settings\ahmed\Desktop\ Tiss% Vas\Test2.htm 


& File: fC: /Documents%20and%20S5ettings/ahmed/Desktop/ ST +%T/ssy327 + Yonas] 3 My Computer 


(3) Save the modifications in the two files Test] .html 'and" Test2.html 
(4) Open the 'Test].html' from the desktop and notice the result of the 
implementation of the code in the Internet browser screen. 


(5) Click the hyperlink "second page’, what happens? take notes: 


(6) Once you click the hyperlink, you move "Test2.html' page which 
appears in the browser screen. 
(7) From the second web page "Test2.html' try to return to the first page 


"Test1 .html' by clicking the hyperlink "Egyptian flag image". 
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"Test2.html' through the application of Expression Web or modification in 


Í Required: Modify what is required in web pages 'Test].html' and 


\ _the HTML code so: f 


e When you click the "sùil 4.2 call" on page browser screen, you can 
move to web page "Test2.html'. 

e You can return to the first page "Test1.html' if you click Egyptian 
flag image of the browser screen for the page "Test2.html'. 


Under the supervision of your teacher, follow the next instructions: 


(1) Load the program "Expression Web". 

(2) Open "Test1.html' and "Test2.html' web pages, through the 
File menu, and then select Open, and select the file name 
"Test1.html', and repeat the above for the second file 


"Test2.html." 


7 
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© ~ % dJ « ANSARYI (F) >» 25 > 


Organize v New folder 
A Name 
J Libraries 
*] Documents 
a Music 
tee! Pictures 
E Videos 


È Shortcut to vbs 


#8 Homegroup 


S xampp-win32-5.6.3-0-VC11-installer of 
E Jo Vl ull Laal gill WWI acl -en 4/1/2 
KÈ Jol uwha Loall si ull aol 

G5 Jol pulpal! Lail sgil lil eral 

i) S 2 Wis 


vi g 


jM Computer 
i, 05 (C:) 
cm RECOVERY (E:) 
a ANSARY! (F:) 


Filename: Test1 v. All Files 


Tools ~ | Open Dál Cancel 


(3) Notice that the name of web pages is displayed on the screen 
of the program as follows: 


File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help 


D- dna BA-F7 ABBY 9-¢- She ao T- Gnr + DDE 
A) Paragraph > (Default Font) = (Default Size) ~BIY ESRB AK EERE O-Y- Ao nered g 


il a FESE {Show Lay 1a tid 5 
Folder List ajax fee || Testa.htm* CTest2htm" 


= = x || Toolbox 
di C:\Users\ansaryNew Documents A |f] [<body>] p>) ; 
=) Butterfly Fish,jo9 rite 
= button IC.jog LD 5 ppc! > 
fi < 
= 


ee button10. pg 
ie button 1E.jo9 


__) V.dnt 

CB defoutt.htn 

9) hopes.htm 

18) personal_data.htm 
(9) quaificaton.htm 
FA eS 


A} Attach Style Sheet. 


Select CSS style to apply: 


Clear Styles 


yfad) v 


Visual Aids On Style Application: Auto 4.22 KB Quirks 591x377 IE6 CSS2.1 


Consider the previous screen and notice the following: 
a. Web pages 'Test1.html" and "Test2.html" names are displayed. 


j Web Site ||Test1.htm* \\Test2hhtm® \ x 


F 
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b. The page that we have created through markup language HTML code 


appears as if it were in the browser screen, which we have referred 
to previously in the property (WYSIWYG), we can make any format or 
impact or add any type of information in the page by typing and 
inserting as easily as if we were to deal with any word processing 


program, which appears in the toolbars. 


File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help 
Ds HAM AS-F¥) 4 BBEI9-*- BOE 8 20/T-Ourn» « i 
A) Paragraph ~ (Default Font) ~ (Default Size) ~ BIU EE =a A A jE i= #é 


TF Sl Jai ‘Tool Td Hid E 


c. Try to click the following three buttons: - Code- Split-Design 


[Eaesion| E spit code 


Write down your notes: .........cccece eee e eee eee eee eee eeeeeeeeeenaeneeneeeae 


Discuss this with your classmates and your teacher. 


[Fabesion| E spit code 


- Design - The Design displays the web page, as it 


appears in the internet browser screen, and 
every part of the web page in the Design screen 
is determined by "Select" whose html code 


appears in the code screen. 


- Code — Markup language HTML code displays all the 


Web page components that were displayed. 


— Split — The screen is divided into two parts; Web 


page appears in the first part, where HTML code 


appears in its other part. 
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eee SSN 1 : 


(4) Activate first web page "Test].html', then click the Split button to 
show Web pages and HTML code. 

(5) To make a hyperlink to the phrase "second page", you need to: 
e Select "4ili!l iaai" , and then select "Hyperlink' from "Insert' 


menu to show the following window: 


Link to: Text to display: auld! zial ScreenTip... 


1. Look in: BE C:\Users\ansaryNew \Documents\My Web Sites| Y E] @ Ba 
or 


©) F:\2 &\Testi.htm (open) 
ara EJ F:\2 &\Test2.htm (open) 
=) Butterfly Fish.jpg 
(=| button1C.jpg 
Browsed |©] button1D.jpg 
Pages |Œ] button1E.jpg 
CV.dwt 


į |E) defaulthim 
| hopes.htm 
Æ | personal_data.htm 


Address: Test2.htm 


Recen 
Files 


e Select the page name 'Test2.html" then click "OK" button 
(6) This phrase "sùl äaiall" becomes a Hyperlink where it appears in a 
distinctive color, and underlined, and when you select a 
hyperlinked word "4u\4!) iaaii" in the Design window , HTML code is 


highlighted in the Code window as follows: 
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Eile Ede Wew jnset Format Tools Table Site DataView TaskPanes Window Help 
JG dha CAA BI 9-0 Shah AO Tore 6 ads 
Aj Paragraph > (Default Font) ~ (Defaut Size) -B ig E zau A a EEE O-*%-A- nue èd ) 5 


CEE 


db CWsers\ansarytew Documents a |f; 
be Buttery Fich.p9 
ie Dutton IC. jog 
E Dutton iD. pg 
be button iE. po 
| Chaat 
Q delsdthta 
3) hopes hte 
8) persoral_data.hoe 
9) qualfcaton hin 
=a et ee i 


A} Attach Style Sheet... 


Select CSS style to apply: 


Visual Aide On Style Application: Auto 435KB Quirks 991x226 IES CSS2.1 


(7) The same way we can make the Egyptian flag Hyperlink by activating 
the second web page "Test2.html', making sure to click the Split 
button. 

| (8) Click Egyptian flag image to select it, and then select from "Insert' 


menu "Hyperlink" command to display the following window: 


pic 
(@ Shortcut to hort_Hanan_t 
t 


i ED hmi 
TestLhtmi 
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e Select the page name "Test1.html" then click "OK" button. 


(9) This image of the "Egyptian flag image" becomes a hyperlink where the 
mouse pointer changes on pointing it, and when you select a hyperlink — 
flag image - in the Design window, HTML code is highlighted in 


the Code window as follows: 


r x 
Í File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help Type a question for help 7 
D- G- HAA BR-Y 4BBS|9- JB 8)ao\1- Orns «¢ AYE 
Í A} Paragraph ~ (Default Font) + (Default Size) ~- BID =S Ac SESS O-Y- Av amwe « 2 z 
$A Gh ety SS | Gad Gad EFES EE] *| Z| Et show Layout Tool TA TA 
Folder List Toolbox o x 
>|) HTML A 
E Butterfly Fish.jpg E Tags 
= g 13 </style> 
| button 1C.jpg 14 </Head> 25} <div> 
=) button 1D.jpg 15 EEJ <span> 
| button 1E.jpg 16 <Body> = Break 
|_| CV.dwt 17 <div class="style2"> ; 
G3 defauit.htm 18 <strong>gsivl & «Ls ol jue Io] = Horizontal Line 
[8] hapes.him 19 </strong></div> {a Image 
npe 20 <p align = "Right"> 3382 Inline Frame 
|8) personal_data.htm 21 <a href="Test1.htm"> a 
|) qualification.htm 22 <img src = "Egypt.jpg” Height=50 Width=100 class="stylel"><,‘<> Player 
m See eee 23 wis¥l aiai </p> {| Paragraph v 
£ > 24 </Body> — 
Apply Styles Oo x 
call al) Lå oy) paa | gla} Apply Styles ‘Manage Styles\ Xx 
Al |g SS 
E 24 E T img.stylel AA New Style... | Options Y a 
<img.style1> AX Attach Style Sheet... 
a PER Q 
E Attributes E 
ei class — style1 = IAPS Anil Select CSS style to apply: 
ef height 50 Clear Styles 
H src  Egypt.jpg 
H width 100 E| Current Page | 


g acces... 
e align 


@.stylel 


i v ||Gdesion E’split E code 
Test1.htm Visual Aids: On _ Style Application: Auto 441KB Quirks 591 186_IE6_CSS2.1 


(10) To test the hyperlink and navigate to "Test2.html' page, Click the 
hyperlink "isėl åsa" while still holding the Ctrl key on the keyboard, 


then move to the second page 'Test2.html' that becomes active. 


(11) And also you can return to the "Test].html" page, click the hyperlink 
"Egyptian flag image" and hold the Ctrl key on the keyboard, and then 


move to the first page "Test].html" that becomes active. 
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we se 
T 


( 
l 


\ 


Required: Create a new site by applying Expression Web ! 


Implement the following steps under 


ei SSRI cuteshitt-O the supervision of teacher: 
ecent Sites > 
Close , 
e Open "Expression web program" 
Publishing 
Publishing Settings... è cli k "Si " f Il : 
= Publish Current File... Ctri+ Shift+U IC ite menu as O OWS: 
= Publish Changed Files... Ctrl+Shift+H 
Publish All Files... Ctri+ Shift+A e Select "New Site" command. 
Delete... 
eee ee e Make sure you receive the following 
mport > 
Manage Sites List... window on your computer screen. 


Site Settings... 


= = 
New a) 
‘Site | 
G al a One Page Site Description 
Empty Site Create a new site with nothing in it. 
Templates Pm | Import Site Wizard 
Options - 
[E] Add to current site 
Use Encrypted Connection (SSL) 
Specify the name and location of the new site 
Location: Es \xampp\htdocs\dictionary| = Browse... 
[F] Add to Managed List Name: [dictionary 
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Study the screen and discuss your teacher and classmates. 


e From the New Site window, select "Empty Site" 
e Inthe location box, type site path "C:\xampp\htdocs" 
e Inthe name box type the site name "dictionary". 


By typing the site" 
Dictionary", you make a folder 


in the path. 
C:\xampp\htdocs 


N 
New [2 fenton) 
Site | 
| | [E] one Page site Description 
General | ~ i 
| | g Empty Site Create a new site with nothing in it. 
Templates | Import Site Wizard 
Options 
| Add to current site 
L | Use Encrypted Connection (SSI 
Specify the snd location of the new site 
Location: | C:\xampp\htdocs\dictionary| X | Browse... } 
[V] Add Name: |dictionary 
Ga Core 


e Save the site making sure of its name and location. 


e Try track the path and be sure the site saved within 


the htdocs folder. 


e Site folder appears as in the following figure in the browser 


window "Windows Explorer": 


mE Computer 
ŠL Abdaiiah_Mansour {C:) 
d SAVG 
A 753900733585fdo4e4d822f9f832 


d AdwCleaner 
a d9978369e59060711b64 
J Downloads 
Ae MSOCache 
d Perflog: 
d Program Files 
d ProgramData 
d SWsetup 
d SWTOOLS 
d Users 
d Windows 
d xampp 

c> Local Disk (0:) 


Se Network 


b 17 tems 


are with ~ Burn New folder 


Ae dashboard 


GG apache_pb2_ani gf 
©) epplications.htrn! 
A) banemicss 
favicon.ico 

©) ndexhtmi 

EÍ endex php 


Dictionary 


folder 


= oa 
P 
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<> | Activity (6 


Title: "Creating Header.php page in the design screen." 


Required: Under the supervision of teacher, Create Page Header.PHP | 
using the program 'Expression Web". ; 
© e A suitable image appears at the beginning of the site pages. 
e The basic texts that are linked to pages on the site to help the 
site handler to wander around it. 


Implementation Steps. 
(1) Load "Expression Web". 


(2) Select the display style of Split. 

(3) Insert image Banner, and you can use your previous experience 
in dealing with a photo editing application to edit the image as 
desired. 

(4) Type the following texts below the image: 

Bac Line « llaa Jute « Glaus Liia « glaas oe dan: glaas Abba Aruni 


f 
da 
i unicatiy Hiii) 


C 


sacle nllauas iila iu J 
t duty 
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Required: Under the supervision of teacher, use "Expression 
Web' program to create connections between texts down image 


Banner pages and their respective location. 


I 
l 
i 
i 
i 
i 
i 
i 
i 
i 
i 
\ 


Steps to implement activity: 


Firstly, 
Open "Header.php'" page through Expression Web program and 


study the following code with your classmates and your teacher: 


<html dir="rtl"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
</head> 
<body> 
<div> 
<img height='161' src="images/banner.jpg' width='1267' > 
</div> 


WA UkwWN ke 


<div style="width: 1256px;text-align:right" > &nbsp: 
<a href="index.php">4s5 </a> 
&nbsp;&nbsp:&nbsp:&nbsp;&nbsp;&nbsp; 


da e 


<a href="add_term.php">&nbsp;@ibwas 482} 


</a>&nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: 
<a href="search term.php">G@lbwas ge Gaull</a> 
&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 

<a href="Del Term.php">@lbwas céaa</a> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp:&nbsp: 

<a href="Edit_Term.php">G@ibwas Quant 
</a>&nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: 
<a href="Help.php">3se tbs </a> 

</div> 


</body> 
5 </html> 
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Secondly, 


the previous code can be done in the Design style as follows: 


| 1- OPEN the page header.php through the usage application, select the 
| 
| desired text for which we implement a hyperlink "4.u5)!", from 


context menu, select "Hyperlink ", as follows: 


<span> 
om Break 
E Horizontal Line 
E Image 
© Inline Frame 
r Layer 


<T Paragraph 


~ Form Controls 


E fod giha. SSL} CEE 
: | gő Cut 
Sa Copy 
G4 Paste 


Quick Tag Editor... 

Zä Manage Editable Regions... 
Page Properties... 

A Font.. 


2- Select a linked page index.php as follows: 


Insert Hyperlink 


Text to display: | Āsi yll Screentip... 
Look in: [im Dictionary ~] E) =] 
f Jý Del_Term.php Oa Bookmark... 


4) desktop.ini 


i [i $ edit_term.php Target Frame... 
E aý header_links.php 
J Parameters... 


EEE (ob Help.php 


Place in This 
Document 

Pages |p’ index.php 

LEŚ post.php 

Recent oo reg.php 
eee Cb search_term.php 

E$ signin.php < 


Address: [index.php v | 
| o Om | 


Create New 
Document 


= 
E-mail Address 


3- Make all links according to what is planned for the site. . J 
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Activity (8) 


Title: "Create a contact page database" 


Required: Under the supervision of teacher, create a new web page 


<?php 
$username="root"; 
$password=""; 
$database="dbdictionary"; 
$server="localhost"; 


$connect=mysql_connect("$server","Susername",""$password"); 
if (Sconnect) 


OoOWNAAAkWN eR 


{ 

$select=mysql_select_db("$database") or die(" SULHI bac lé å AIS ts clin"): 
} 

else 


{ 
echo("GUall basti JLaiy) ai al"); 


Discuss the typed code - which 
previously explained in 
student's Book - with your 


teacher and classmates. 


Save the page as... 


"connection.php" 


7 


Computer & Information and Communication Technology 
Second year secondary A 


reating Site Pages 
“Illustrated Dictionary of computer terms" 


Required: Under the supervision of teacher, Use the following screen to 


enter PHP code in the places indicated to them to create a Web page 


| that used for inserting a term to database table. 


ni w 


(1)Type PHP code to include Header page 


<?php 
| include("header.php"); 


jon. php input_tesm_terms php* 


an apio 
xoajooL 


1. Insert PHP code to 
include header.php page 


As deun S Addy 


<div style="text-align:center” > <hl1>a Eray 


SHASSI Sapdo Bey 


D orm-data"> 
| <div class="style2"> i 
| <br_/> 
| 1 
l énbsp; énbsp; énbsp; 
| 


Add your PHP code to linking the 


database and add the term 


aénbsp; 7&0 

<input name="trans”" t 

<br/> 

Gaps 

&nbsp; &nbsp; anps SD; nbsp; nbsp; 

<textarea r extAreal" style="width: 480px; height: 30px"></textarea> <br /> 

<br/> | 
oy gaotl | \| 
&nbsp; &nbsp; | 

| 2 <input name= style="width: 488px" type="file" l 
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Activity measures: 


(2) Add your PHP code to connect to the database and add a new term data. 


(3) Show page "clhwas 43L.2)" through Internet browser with the address: 


Localhost/dictionary/Add_Term.php 


(4) Insert the new term and then press Add’. 


Goodbye 
See you in the 


second term 
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